// 等待 DOM 加载完成
document.addEventListener('DOMContentLoaded', () => {
    const contentContainer = document.getElementById('content-container');

    // 1. 拦截所有导航链接的点击事件
    document.querySelectorAll('.ms-link').forEach(link => {
        link.addEventListener('click', (e) => {
            e.preventDefault(); // 阻止默认跳转行为
            const url = link.getAttribute('href'); // 获取目标 URL
            loadPage(url); // 加载目标页面的局部内容
        });
    });

    // 2. 监听浏览器前进/后退事件
    window.addEventListener('popstate', (e) => {
        if (e.state && e.state.url) {
            loadPage(e.state.url, false); // 不添加新的历史记录
        }
    });

    // 3. 核心函数：加载页面局部内容
    async function loadPage(url, addToHistory = true) {
        try {
            // 发送 Ajax 请求，携带标识头（供后端判断是否为局部请求）
            const response = await fetch(url, {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            });

            if (!response.ok) throw new Error('页面加载失败');

            // 获取后端返回的主体片段 HTML
            const html = await response.text();

            // 更新页面标题（可选：从响应头或 HTML 中提取）
            const newTitle = response.headers.get('X-Page-Title') || '新页面';
            document.title = newTitle;

            // 局部更新主体内容
            contentContainer.innerHTML = html;

            // 2. 解析HTML并处理脚本
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = html;

            // 3. 重新创建脚本标签以确保执行
            const scripts = tempDiv.querySelectorAll('script');
            scripts.forEach(oldScript => {
                const newScript = document.createElement('script');
                Array.from(oldScript.attributes).forEach(attr => {
                    newScript.setAttribute(attr.name, attr.value);
                });
                newScript.textContent = oldScript.textContent;
                oldScript.parentNode.replaceChild(newScript, oldScript);
            });

            // 4. 将片段插入DOM
            const container = document.getElementById('content-container');
            container.innerHTML = '';
            container.appendChild(tempDiv);

            // 5. 初始化Vue实例（DOM插入后执行）
            if (window.initVueApp) {
                window.initVueApp();
            }

            // 更新浏览器 URL（不刷新页面）
            if (addToHistory) {
                history.pushState({ url }, newTitle, url);
            }

        } catch (error) {
            console.error('局部刷新失败：', error);
            // 失败时降级为全页跳转
            window.location.href = url;
        }
    }

    loadPage(window.location.pathname, false); // 不添加新的历史记录
});
